<template>
	<view class="exch_box">
		<view class="store">
			<view>商品信息</view>
			<view class="exch_inf">
				<view>
					<image
						:src="list[0].pic">
					</image>
				</view>

				<!-- {{item.item[0].name}}
				{{item.item[0].price}}
				{{item.item[0].integral}}
				{{item.item[0].count}} -->
				<view class="name">
					<text class="left_exch">{{list[0].productName}}</text>
					<text class="right1">{{list[0].scoreNum}}积分</text>
				</view>
				<view class="sub-name">
					<text class="left2">价值{{list[0].price}}元</text>
					<text class="right2">× 1</text>
				</view>
			</view>
		</view>
		<view class="ab_store" @click="store">
			<view>适用门店</view>
			<view>共{{hallNum}}家</view>
			<view>
				<image
					src="https://cdn8.axureshop.com/demo/2116044/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u898.png">
				</image>
			</view>
		</view>
		<view class="other">
			<view class="title">兑换须知</view>
			<view>1.有效期：兑换后当天生效，有效期1个月。</view>
			<view class="explain">2.适用：仅限堂食。</view>
			<view class="explain">3.本券不与其他优惠叠加使用，不可转让、转售，不可兑换为现金。</view>
			<view class="explain">4.本优惠券不可开发票。</view>
		</view>
		<view class="aplay">
			<view class="apl_inf">
				<view>支付方式</view>
				<view>积分兑换</view>
			</view>
			<view class="apl_inf">
				<view>当前积分</view>
				<view>{{score}}积分</view>
			</view>
			<view class="apl_inf1">
				<view>小计</view>
				<view>{{list[0].scoreNum}}积分</view>
			</view>
		</view>
		<view class="exh_btn" @click="confirm">
			<view>立即兑换</view>
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				phone: '',
				status: '',
				scoreShopId: '',
				userid: '',
				score: '',
				hallNum:'',
				// scoreNum:'',
				list: []
			}
		},
		onShow() {
			this.phone = uni.getStorageSync('phone');
			this.status = uni.getStorageSync('status');
			this.scoreShopId = uni.getStorageSync('scoreShopId');
			this.getdetail();
			this.getUID();
			this.userid = uni.getStorageSync('userid');
			this.hallnum();
		},
		methods: {
			hallnum(){
				http({
					method:'post',
					url:'/hallnum',
					data:{
						// scoreShopId:this.scoreShopId
					},
					success:(res)=>{
						if(res.data){
							this.hallNum=res.data.data[0].num;
						}
					}
				})
			},
			getdetail() {
				http({
					method: 'post',
					url: '/goodsdet',
					data: {
						scoreShopId: this.scoreShopId
					},
					success: (res) => {
						if (res.data) {
							this.list = res.data.data;
							// this.scoreNum=res.data.data[0].scoreNum;
						}
					},
					
				})
				
			},
			getUID() {
				http({
					method: 'post',
					url: '/getUID',
					data: {
						phone: this.phone
					},
					success: (res) => {
						this.userid = res.data.data[0].id
						this.score = res.data.data[0].score
						// console.log(res.data.data[0].id)//用户ID
						uni.setStorageSync("userid", res.data.data[0].id);
						if (res.data.msg == '请先登录') {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					}
				})

			},
			store() {
				uni.navigateTo({
					url: '/pages/store/store',
					// ?id=state
				})
			},
			confirm() {
				uni.navigateTo({
					url: '/pages/pay/pay',
					// ?id=state
				})
			}
		}
	}
</script>

<style>
	.exch_box {
		width: 375px;
		height: 600px;
		background-color: rgba(245, 247, 247, 1);
	}

	.store {
		width: 680rpx;
		height: 240rpx;
		background-color: white;
		margin-left: 5%;
		margin-top: 20rpx;
		border-radius: 12rpx;
	}

	.store view:nth-child(1) {
		font-size: 32rpx;
		color: #333;
		margin-left: 20rpx;
	}

	.exch_inf {
		margin-left: 10rpx;
	}

	.exch_inf view:nth-child(1) {
		width: 110rpx;
		height: 110rpx;
		display: inline-block;
		position: relative;
		left: 0rpx;
		top: 40rpx;
		text-align: left;
	}

	.exch_inf view image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}

	.exch_inf view:nth-child(2) {
		display: inline-block;
		height: 110rpx;
		width: 500rpx;
		position: relative;
		left: 10rpx;
	}

	.left_exch {
		display: inline-block;
		text-align: left;
		position: absolute;
		left: 20rpx;
		top: 40rpx;
		width: 260rpx;
		height: 40rpx;
		font-size: 28rpx;
		color: #333;
	}

	.right1 {
		display: inline-block;
		text-align: right;
		position: absolute;
		right: 20rpx;
		top: 40rpx;
		width: 120rpx;
		height: 40rpx;
		font-size: 28rpx;
		color: #333;
	}

	.left2 {
		display: inline-block;
		position: absolute;
		left: 204rpx;
		top: 180rpx;
		font-size: 24rpx;
		color: #999;
	}

	.right2 {
		display: inline-block;
		position: absolute;
		right: 82rpx;
		top: 180rpx;
		font-size: 24rpx;
		color: #999;
	}

	.ab_store {
		margin-top: 40rpx;
		background-color: white;
		width: 680rpx;
		height: 80rpx;
		margin-left: 5%;
		border-radius: 12rpx;
	}

	.ab_store view:nth-child(1) {
		font-size: 24rpx;
		color: #999;
		display: inline-block;
		line-height: 80rpx;
		margin-left: 30rpx;
	}

	.ab_store view:nth-child(2) {
		font-size: 24rpx;
		color: #F77214;
		display: inline-block;
		margin-left: 430rpx;
		line-height: 80rpx;
	}

	.ab_store view:nth-child(3) {
		display: inline-block;
		line-height: 80rpx;
	}

	.ab_store view image {
		width: 12rpx;
		height: 20rpx;
	}

	.other {
		width: 680rpx;
		height: 300rpx;
		margin-left: 5%;
		margin-top: 40rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.title {
		color: #333;
		font-size: 28rpx;
		line-height: 30rpx;
		padding: 30rpx;
	}

	.other view:nth-child(2) {
		font-size: 24rpx;
		color: #999;
		margin-left: 30rpx;
	}

	.explain {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
		margin-left: 30rpx;
	}

	.aplay {
		margin-top: 40rpx;
		width: 680rpx;
		height: 240rpx;
		background-color: white;
		margin-left: 5%;
		border-radius: 12rpx;
	}

	.apl_inf {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: #999 solid 1rpx;
	}

	.apl_inf view:nth-child(1) {
		font-size: 24rpx;
		color: #999;
		display: inline-block;
		margin-left: 30rpx;
	}

	.apl_inf view:nth-child(2) {
		font-size: 24rpx;
		color: #333;
		display: inline-block;
		margin-left: 416rpx;
	}

	.apl_inf1 {
		height: 80rpx;
		line-height: 80rpx;
		position: relative;
	}

	.apl_inf1 view:nth-child(1) {
		font-size: 24rpx;
		color: #999;
		display: inline-block;
		margin-left: 30rpx;
	}

	.apl_inf1 view:nth-child(2) {
		font-size: 28rpx;
		color: #333;
		display: inline-block;
		/* margin-left: 258rpx; */
		position: absolute;
		right: 44rpx;
	}

	.exh_btn {
		height: 90rpx;
		background-color: white;
		margin-top: 100rpx;
		padding: 20rpx;
	}

	.exh_btn view {
		border-radius: 90rpx;
		width: 80%;
		margin-left: 10%;
		height: 90rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 90rpx;
		color: white;
		background-color: rgba(247, 114, 20, 1);
	}
</style>
